<template>
  <div class="dust-page">
    <ScaleScreen>
      <div class="bg">
        <div class="big-screen"  v-if="schooleId!==null">
          <myheader  :schooleId="schooleId" />
          <div class="screen-boxs u-p-t-10">
            <div class="flex screen-center">
              <div style="width:25%">
                <!--报警概况 -->
                <topleft :dataVal="echartsData.leftTop">
                  <topLeftBottom 
                  slot="bottom" 
                  :dataVal="echartsData.leftTopBottom"/>
                </topleft>
              </div>
              <div style="width:50%">
                <!-- 学校当日报警详情 -->
                <topcenter slot="right"  :schooleId="schooleId" />
              </div>
              <div style="width: 25%">
                <!-- 当日学生统计 -->
                <topright
                :dataVal="echartsData.todatData">
                  <topRightBottom 
                  slot="bottom"
                  :dataVal="echartsData.alarmProcessingRate" />
                </topright>
              </div>
            </div>
            <div class="flex screen-bottom">
              <div class=" u-p-r-20" style="width:50%;">
                <bottomLeft  :schooleId="schooleId" />
              </div>
              <div class=" u-p-l-20" style="width:50%;">
                <bottomRight  style="width:100%;"  :schooleId="schooleId" />
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </ScaleScreen>
  </div>
</template>

<script>
import ScaleScreen from "../components/ScaleScreen/index.vue";
import myheader from "./components/header.vue";
import topleft from "./components/top-left.vue";
import topcenter from "./components/top-center.vue";
import topLeftBottom from "./components/top-left-bottom.vue";
import topright from "./components/top-right.vue";
import topRightBottom from "./components/top-right-bottom.vue";
import bottomLeft from "./components/bottom-left.vue";
import bottomRight from "./components/bottom-right.vue";
export default {
  name: "dataCenter",
  components: {
    myheader,
    topleft,
    topcenter,
    ScaleScreen,
    topLeftBottom,
    topright,
    topRightBottom,
    bottomLeft,
    bottomRight  
  },
  data() {
    return {
      echartsData:{},
      schooleId:null
    };
  },
  created(){
    if(this.$route.query){
      this.schooleId=this.$route.query.schoole_id||0
    }else{
      this.schooleId = 0 
    }
  },
  mounted(){
    
    // 学校报警
    this.getDataHandlerLeftTop()
    // 今日报警概况
    this.getDataHandlerToday()
  },
  methods: {
    // 今日报警概况
    async getDataHandlerToday(){
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/police_center/getTodayResortOverview', {params})
      // console.log(data,'=======data')
      try{
        if ( data.code === 0 ) {
           this.$set(this.echartsData,'todatData',data.data)
          this.getDataHandlerNianji()
        }
      } catch {
        console.log('error')
      }
    },
    // 当日各年级报警处理率
    async getDataHandlerNianji(){
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/police_center/getTodayResortHandle', {params})
      try{
        if ( data.code === 0 ) {
          this.$set(this.echartsData,'alarmProcessingRate',data.data)
        }
      } catch {
        console.log('error')
      }
    },
    // 学校报警概况
    async getDataHandlerLeftTop(){
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/police_center/index', {params})
      // console.log(data,'=======data')
      try{
        if ( data.code === 0 ) {
          this.$set(this.echartsData,'leftTop',data.data)
          this.getDataHandlerLeftTopBottom()
        }
      } catch {
        console.log('error')
      }
    },
    async getDataHandlerLeftTopBottom(){
      let params = {schoole_id:this.schooleId}
      let { data } = await this.$http.get('/police_center/getTodayUntreatedTotal', {params})
      // console.log(data,'=======data')
      try{
        if ( data.code === 0 ) {
           this.$set(this.echartsData,'leftTopBottom',data.data)
        }
      } catch {
        console.log('error')
      }
    },
  },
};
</script>

<style lang="scss">
@import url("../../../../views/management/dataCenter/style.scss");

@for $i from 1 through 1000 {
  @if $i % 2 == 0 or $i % 5 == 0 {
    .u-margin-#{$i},
    .u-m-#{$i} {
      margin: $i + px;
    }
    .u-padding-#{$i},
    .u-p-#{$i} {
      padding: $i + px;
    }
    @each $short, $long in l left, t top, r right, b bottom {
      .u-m-#{$short}-#{$i} {
        margin-#{$long}: $i + px;
      }

      .u-p-#{$short}-#{$i} {
        padding-#{$long}: $i + px;
      }
      .u-margin-#{$long}-#{$i} {
        margin-#{$long}: $i + px;
      }
      .u-padding-#{$long}-#{$i} {
        padding-#{$long}: $i + px;
      }
    }
  }
}

* {
  box-sizing: border-box;
}
.dust-page {
  width: 100%;
  height: 100vh;
  background: #081425;
}
.bg {
  width: 100%;
  height: 100%;
}
.big-screen {
  // width: 1920px;
  // height: 1080px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background: url("../../../../assets/img/bigScreen.png") no-repeat;
  background-size: 100% 100%;
  // height: 100vh;
  display: flex;
  flex-direction: column;
}
.screen-center {
  height: 70%;
}
.screen-bottom {
  height: 30%;
  padding: 10px 0;
}
.screen-boxs {
  flex: 1;
  padding: 10px;
  margin-bottom: 10px;
  padding-bottom: 20px;
  overflow: hidden;
}
.policeTitle{
    height: 50px;
    background: url('../../../../assets/img/police_bg.png');
    background-position: left top, right bottom, left top;
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-size: auto;
    span{
      font-size: 18px;
      font-weight: 600;
      color: #e2eef2;
      line-height: 30px;
      padding-left: 90px;
      color: #e2eef2;
    }
}


</style>
